<template>
    <h3>条件渲染</h3>
    <div v-if="flag">flag为真就能看见v-if</div>
    <div v-else>flag为假才能看见v-else</div>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>NOT A,B,C</div>
    <div v-show="flag">flag为真就能看见v-show</div>
    <!-- v-if只有在条件为真的时候才会渲染，条件为假不会渲染，有更多切换开销 -->
    <!-- v-show不管怎样都会渲染，只在切换css的display属性，有更多初次渲染开销  -->
</template>

<script>
export default{
    data(){
        return{
            flag:true,
            type:"B"
        }
    }
}
</script>